<template>
    <div class="user">
        <!-- 个人中心 -->
        <div class="container" v-if="info">
            <!-- 头部信息 -->
            <div class="header">
                <div class="head_top">
                    <div class="iconfont" @click="$router.back()">
                        &#xe624;
                    </div>
                    <div class="iconfont">
                        &#xeb10;
                    </div>
                </div>
                <div class="head_con">
                    <div class="img">
                        <img :src="info.avatar_medium" alt="">
                    </div>
                    <div class="outher">
                        <div class="info">
                            <div class="name">{{ info.nick }}</div>
                            <div class="medal">{{ info.usermedal.count_text }}</div>
                        </div>
                        <em>LV.{{ info.lvl }}</em>
                        <div class="exp" v-show="!obj.show" @click="follow">关注</div>
                        <div class="over" v-show="obj.show" @click="follow">已关注</div>
                    </div>
                </div>
                <div class="head_bot">
                    <ul>
                        <li>厨娘</li>
                        <li>{{ info.age }}</li>
                        <li>{{ info.location }}</li>
                        <li>IP属地 {{ info.ip_address_location }}</li>
                    </ul>
                    <p>{{ info.introduction }}</p>
                </div>
            </div>
            <!-- 导航 -->
            <div class="nav">
                <ul>
                    <li>
                        <h5>{{ info.following_count }}</h5>
                        <span>关注</span>
                    </li>
                    <li>
                        <h5>{{ info.followers_count_text }}</h5>
                        <span>粉丝</span>
                    </li>
                    <li>
                        <h5>{{ info.favoed_count_text }}</h5>
                        <span>被收藏</span>
                    </li>
                    <li>
                        <h5>{{ info.noted_count_text }}</h5>
                        <span>被学做</span>
                    </li>
                    <li>
                        <h5>{{ info.point }}</h5>
                        <span>经验值</span>
                    </li>
                </ul>
            </div>
           
            

            <van-tabs v-model="active" color="#FFB906" line-width="20">
                <van-tab title="菜谱">
                    <div class="list" v-for="(item,index) in list" :key="index">
                        <div class="list_head">
                            <img :src="item.r.img" alt="">
                        </div>
                        <div class="list_foot">
                            <h5>{{ item.r.collect_count_text }}</h5>
                            <h3>{{item.r.n}}</h3>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="笔记">
                    <van-calendar :poppable="false" :show-confirm="false" :style="{ height: '500px' }"
                        color="#FFB906" />
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import { ref } from "vue"
import "../assets/font_gu/iconfont.js";
import { useRoute } from 'vue-router'
import { useStore } from "../store/index";
import { reactive, onUpdated } from '@vue/runtime-core';
import { getJsonPerson } from "../api/person.js";
import { getJsonHome } from "../api/home.js";
export default {
    setup() {
        let route = useRoute()
        let store = useStore();
        let obj = reactive({
            len: store.follow.length,
            show:false
        })
        let info = ref(null);
        let list = ref(null);
        let id = route.query.id;
        
        getJsonPerson(id).then(data =>{
            info.value = data.result.user;
            console.log(info.value);
        })
        
        getJsonHome().then(data => {
            list.value = data.result.list.filter(item => {
                return item.r
            })
            console.log(list.value);
        })

        function follow() {
            if (obj.show) {
                let index = store.follow.findIndex(item => {
                    return item.user_id == info.value.user_id
                })
                store.follow.splice(index, 1)
            } else {

                store.follow.push(info.value)
            }
            obj.show = !obj.show
        }
        function creat() {
            let user = info.value.user_id;
            store.follow.forEach(item => {
                if (item.user_id == user) {
                    obj.show = true;
                }
            })

        }
        onUpdated(() => {
            creat()
        }) 
        return {
            obj,
            info,
            list,
            follow
        }
    }
};
</script>

<style lang="scss" scoped>
.user {
    .iconfont {
        font-family: "iconfont" !important;
        font-size: 20px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .header {
        .head_top {
            padding:16px;
            border-bottom: 2px solid #efefef;
            display: flex;
            justify-content: space-between;
            .icon {
                display: flex;
            }
        }
    }

    .icon {
        .fir {
            padding-right: 10px;
        }
    }

    .head_con {
        display: flex;
        margin-top: 20px;
        padding: 0 16px;

        .img {
            // flex: 1;
            // padding: 3px 0;
            width: 60px;
            height: 60px;
            background-color: aqua;
            border-radius: 50%;

            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                display: block;
            }
        }

        .outher {
            flex: 4;
            padding: 0 0 0 8px;

            .info {
                display: flex;
                width: 100%;
                align-items: center;

                .name {
                    font-size: 14px;
                    color: #0f0f0f;
                    min-width: 50px;
                }

                .medal {
                    padding-right: 5px;
                    background-color: #ffe195;
                    font-size: 10px;
                    border-radius: 9px;
                    margin-left: 8px;
                    overflow: hidden;
                    &::before{
                        content: "";
                        width: 25px;
                        height: 25px;
                        vertical-align: middle;
                        display: inline-block;
                        background: url('../assets/img_gu/2u.png') no-repeat;
                        background-size: 100%;
                        background-position: 0px -7px;
                        margin-right: 3px;
                    }
                }

            }
            em {
                color: #fec83a;
                font-size: 12px;
                padding: 5px 0;
                display: block;
                font-style: italic;
            }

            .exp {
                background-color: #ffc533;
                font-size: 14px;
                font-weight: 600;
                color: #333;
                padding: 5px 0;
                text-align: center;
                border-radius: 13px;
            }
            .over {
                background-color: #ccc;
                font-size: 14px;
                font-weight: 600;
                color: #333;
                padding: 5px 0;
                text-align: center;
                border-radius: 13px;
            }
        }
    }

    .head_bot {
        margin-top: 18px;
        padding: 0 16px;
        ul {
            display: flex;
            padding: 4px 0;
            li {
                color: #0f0f0f;
                padding-right: 10px;
                font-size: 12px;
                font-weight: 600;
            }
        }

        p {
            font-size: 12px;
            color: #494949;
        }
    }

    .nav {
        padding: 18px 12px 0 12px;
        margin-bottom: 12px;

        ul {
            display: flex;

            li {
                width: 20%;

                h5 {
                    text-align: center;
                    font-weight: normal;
                    font-size: 14px;
                    margin-bottom: 9px;
                }

                span {
                    display: block;
                    text-align: center;
                    color: #7e7e7e;
                    font-size: 12px;
                }
            }
        }
    }

    .column {
        display: flex;
        background-color: #3d3d3d;
        margin: 0 12px;
        border-radius: 8px;
        align-items: center;
        padding: 4px 0;

        .vip {
            flex: 1;
            display: flex;
            padding-left: 9px;
            align-items: center;
        }

        .sign {
            padding-left: 9px;
            display: flex;
            flex: 1;
            position: relative;
            align-items: center;

            &::before {
                content: "";
                width: 0px;
                height: 18px;
                border-left: 1px solid #c1ad78;
                position: absolute;
                top: 8px;
                left: 0px;
            }
        }

        .img {
            padding: 0px 6px;

            img {
                display: block;
                width: 30px;
                height: 30px;
            }
        }

        .txt {
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            h2 {
                font-size: 13px;
                color: #fee192;
            }

            span {
                font-size: 8px;
                color: #fff;
            }
        }
    }

    .subnav {
        ul {
            display: flex;
            flex-wrap: wrap;
            padding-top: 5px;

            li {
                width: 20%;
                padding-top: 16px;

                .font {
                    font-size: 22px;
                    text-align: center;
                    padding-bottom: 10px;
                }

                span {
                    display: block;
                    text-align: center;
                    font-size: 12px;
                    color: #969696;
                }
            }
        }
    }

    .list{
        padding: 10px 0;
        .list_head{
            img{
                width: 100%;
                display: block;
            }
        }
        .list_foot{
            padding: 0 16px;
            line-height: 26px;
            h5{
                font-size: 13px;
                font-weight: normal;
            }
            h3{
                font-size: 15px;
            }
        }
    }

    .van-tabs ::v-deep .van-tabs__wrap {
        margin-bottom: 15px;
    }

    .van-calendar ::v-deep .van-calendar__header-title {
        display: none;
    }
}
</style>